
<template>
  <div class="container">
    <el-select v-model="scaleConfigValue" style="width: 100px; margin-right: 10px" @change="setScaleConfigFuc">
      <el-option value="hour">按小时</el-option>
      <el-option value="day">按天</el-option>
      <el-option value="week">按周</el-option>
      <el-option value="month">按月</el-option>
      <el-option value="year">按年</el-option>
    </el-select>
    <gantt-component class="left-container" :tasks="tasks" />
  </div>
</template>
 
<script>
/* eslint-disable */
import GanttComponent from './GanttComponent.vue';
 
export default {
  name: 'app',
  components: {GanttComponent},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: '2400Khz', render:'split'},
          {id: '1|1', parent:'1', text: '2400Khz', start_date: '2022-09-07 01:00:00', duration: 0.5, progress: 0.95},
          {id: '1|2', parent:'1', text: '2403Khz', start_date: '2022-09-07 18:00:00', duration: 1.5, progress: 0.95},
          {id: '1|3', parent:'1', text: '2405Khz', start_date: '2022-09-08 06:00:00', duration: 2, progress: 0},
          {id: 2, text: '2500Khz', render:'split'},
          {id: '2|1', parent:'2', text: 'Task #21', start_date: '2022-09-07', duration: 3, progress: 0.6},
          {id: '2|2', parent:'2', text: 'Task #22', start_date: '2022-09-08', duration: 3, progress: 0},
          {id: 3, text: '2700Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.16},
          {id: 4, text: '2800Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.37},
          {id: 5, text: '2900Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.57},
          {id: 6, text: '3000Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.16},
          {id: 7, text: '3500Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.37},
          {id: 8, text: '4000Khz', start_date: '2022-09-07：12:00:00', duration: 5, progress: 0.57},
        ],
        links: [{}
          // {id: 1, source: 2, target: 3, type: '0'}
        ]
      },
      scaleConfigValue: 'day',
    }
  },
  methods:{
    setScaleConfigFuc(value) {
      console.log(value);
      this.setScaleConfig(value);
    },
    // 动态设置Scale
    setScaleConfig(level) {
      console.log(level);
      const weekScaleTemplate = function (date) {
        const dateToStr = gantt.date.date_to_str('%M-%d日');
        const weekNum = gantt.date.date_to_str('(%W周)');
        const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
        return dateToStr(date) + '~' + dateToStr(endDate) + '' + weekNum(date);
      };
      switch (level) {
        case 'hour':
          gantt.config.scale_height = 28 * 2;
          gantt.config.subscales = [
            { unit: 'hour', step: 6, date:'%H', },
          ];
          gantt.config.scale_unit = 'day';
          gantt.config.date_scale = '%m-%d';
          gantt.render();
          break;
        case 'day':
          gantt.config.scale_height = 28 * 4;
          gantt.config.subscales = [
            { unit: 'year',step: 1,date: '%Y年',},
            { unit: 'month',step: 1,date: '%F',},
            { unit: 'week', step: 1,template: weekScaleTemplate, },
          ];
          gantt.config.scale_unit = 'day';
          gantt.config.date_scale = '周%D,%d日';
          gantt.render();
          break;
        case 'week':
          gantt.config.subscales = [
            {unit: 'year',step: 1,date: '%Y年',},
            {unit: 'week', step: 1, template: weekScaleTemplate,},
          ];
          gantt.config.scale_height = 28 * 3;
          gantt.config.scale_unit = 'month';
          gantt.config.date_scale = '%F';
          gantt.render();
          break;
        case 'month':
          gantt.config.subscales = [
            { unit: 'year',step: 1,date: '%Y年',},
          ];
          gantt.config.scale_unit = 'month';
          gantt.config.date_scale = '%F';
          gantt.config.scale_height = 28 * 2;
          gantt.render();
          break;
        case 'year':
          gantt.config.subscales = [];
          gantt.config.scale_unit = 'year';
          gantt.config.date_scale = '%Y年';
          gantt.config.scale_height = 28 * 2;
          gantt.render();
          break;
      }
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 600px;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>